import React,{Component} from 'react';
import {
  Link
} from 'react-router-dom';
import './resetPwd.scss';
import './register.scss';
import { resetPassword, getCaptcha, userSentcode } from 'api/login';
import { message } from 'antd';
export default class ResetPwd extends Component{
	constructor(props){
    super(props)
    this.state = {
    	attr1:'',
    	telephone:'',
    	password:'',
    	password1:'',
    	verify:'',
    	captcha:'',
    	yanzheng:'获取验证码',
    	sort:'2',
    	src:'',
    	seconds: 60,
      ver: ''
    }
	}
	handleChange = (e) => {
    let key = e.target.name
    this.setState({[key]: e.target.value})
  }
  _resetPassword = () => {
    if (this.state.password === this.state.password1) {
      resetPassword({
        password: this.state.password,
        captcha: this.state.captcha,
        telephone: this.state.telephone,
        verify: this.state.verify
      }).then(res => {
        if (res.code === 1) {
          message.success('密码修改成功！', 3, this.props.history.push('/login'))
        } else {
          message.error(res.message, 3)
        }
      })
    } else {
      message.error('请输入相同的密码！', 3)
    }
  }
  _getCaptcha = () => {
    getCaptcha({}).then(res => {
      if (res.code === 1) {
        this.setState({
        	src: res.data.url,
          ver: res.data.code
        })
      }
    })
  }
  _userSentcode = () => {
    userSentcode({
    	telephone:this.state.telephone,
    	sort:'2'
    }).then(res => {
      if (res.code === 1) {
      }
    })
  }
  daojishi = () => {
    if (this.state.telephone.match(/^1[3|4|5|7|8]\d{9}$/) && this.state.ver === this.state.captcha) {
    	let siv = setInterval(() => {
        this.setState({
          seconds: (this.state.seconds-1),
          yanzheng: `已发送(${this.state.seconds-1}s重新发送)`,
          attr1:'disabled'
        }, () => {
          if (this.state.seconds === 0) {
            clearInterval(siv);
            this.setState({
            	attr1:'',
            	yanzheng:'重新获取验证码',
            	seconds: 60
            })
          }
        });
      }, 1000)
      this._userSentcode();
    }
  }
  click = () => {
		this.setState({
			attr:'',
			name:'bg1',
			color:'glyphicon-checked color'
		})
	}
	yanzheng = () => {
		if (!this.state.telephone.match(/^1[3|4|5|7|8]\d{9}$/)) {
        message.error('请输入正确的手机号码！', 3)
      }
	}
	con_pwd = () => {
		if(this.state.password!=this.state.password1){
			message.error('请输入相同的密码！', 3)
		}
	}
  _verify () {
    if (this.state.ver != this.state.captcha) {
      message.error('验证码错误！', 3)
    }
  }
	componentWillMount () {
		this._getCaptcha();
	}
	render(){
		return(
			<div className="loginBox">
				<Link to='/login'><span className="glyphicon glyphicon-back back"></span></Link>
				<div className="log_title">重置密码</div>
				<div className="register">
					<div>
						<span>手机号码</span>
						<input type="text" placeholder="请输入常用手机号" name="telephone" value={this.state.telephone} onChange={this.handleChange} onBlur={this.yanzheng}/>
					</div>
					<div>
						<span>验证码</span>
						<input type="text" placeholder="验证码" name="captcha" value={this.state.captcha}  onChange={this.handleChange} id="yzm" onBlur={this._verify.bind(this)}/>
						<div onClick={this._getCaptcha}><img src={this.state.src} className="register_img"/></div>
					</div>
					<div>
						<span>验证码</span>
						<input type="text" placeholder="请输入手机验证码" value={this.state.verify} name="verify"  onChange={this.handleChange}/>
						<input type="button" className="hqyzm" onClick={this.daojishi} value={this.state.yanzheng} disabled={this.state.attr1}/>
					</div>
					<div>
						<span>重置密码</span>
						<input type="password" placeholder="建议至少使用两种字符组合密码" name="password" value={this.state.password} onChange={this.handleChange}/>
					</div>
					<div>
						<span>确认密码</span>
						<input type="password" placeholder="建议至少使用两种字符组合密码" name="password1" value={this.state.password1} onChange={this.handleChange}/>
					</div>
					<div style={{marginTop: '2rem'}}>
						<input type="submit" value="确认重置" id="submit" className="bg1 react" onClick={this._resetPassword}/>
					</div>
				</div>
				{/*<div className="bq">
						<p>总部：中国 · 杭州拱墅区祥园路45号北部软件园盘石新经济大厦</p>
						<p>copyright©2004-2020 盘石信息技术股份有限公司</p>
						<p>All Rights Reserved 浙B2-20090026-13</p>
				</div>*/}
				<div className="tanchu">
					<div>
						<p>密码重置成功，去登录！</p>
						<span>确定</span>
					</div>
				</div>
			</div>
		)
	}
}